﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>倒计时示例</title>
    <style>
        .send {
            width: 150px;
            height: 30px;
            line-height: 30px;
            margin: 0 auto;
            cursor: pointer;
            background: #65be2e;
            color: #fff;
        }

        #send:hover {
            background: green;
        }

        .disabled {
            background: gray;
            color: #fff;
            cursor: default;
            pointer-events: none;
        }
    </style>
</head>
<body>
    <div style="width: 500px;height: 200px;border: 1px solid #65be2e; margin: 200px auto;text-align: center;">
        <p><span>倒计时：</span><b id="time"></b> <span id="second" style="display:none"> s </span></p>
        <p id="send" class="send"></p>
    </div>
    <script src="js/jquery-2.1.0.min.js"></script>
    <script>
        var t1;
        var time = 60;
        $(function () {
            if (time >= 60) {
                clearInterval(t1);
                $("#send").removeClass('disabled');
                $("#send").html('发送');
                $("#second").show();
                $("#time").html(60);
            } else {
                setTime(time);
            }
            $("#send").on('click', function () {
                var second = 60;
                setTime(second);
            });

            function setTime(second) {
                $("#send").addClass('disabled');
                t1 = setInterval(function () {
                    second--;
                    if (second <= 0) {
                        $("#second").hide();
                        clearInterval(t1);
                        $("#send").removeClass('disabled');
                        $("#send").html('发送');
                        $("#time").html(second);
                    } else {
                        $("#second").show();
                        $("#send").html(second + 's后重试');
                        $("#time").html(second);
                    }
                }, 1000);
            }
        });
    </script>
</body>
</html>